/**
 * 自定义 提示框( Toast )组件
 * this.$ztoast("666666666666");
 * this.$zloading('正在加载');
 * this.$zloading.close();
 * this.$zloading.open();
 */
let Toast = {};
let showToast = false; // 存储toast显示状态
let showLoad = false; // 存储loading显示状态
let toastVM = null; // 存储toast vm
let loadNode = null; // 存储loading节点元素

let loadingLogo = `
<svg class="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="rotate(0 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(45 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(90 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(135 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(180 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(225 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(270 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(315 50 50)">
  <rect x="47" y="5.5" rx="47" ry="5.5" width="6" height="25" fill="#eeeeee">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  </rect>
</g></svg>
`;

Toast.install = function(Vue, options) {
  // 参数
  let opt = {
    defaultType: 'top',
    duration: '2500',
    wordWrap: false
  };

  for (let property in options) {
    opt[property] = options[property];
  }

  Vue.prototype.$ztoast = function(tips, type) {

    let curType = type ? type : opt.defaultType;
    let wordWrap = opt.wordWrap ? 'zuiword-wrap' : '';
    let style = opt.width ? 'style="width: ' + opt.width + '"' : '';

    if (showToast) {
      // 如果toast还在，则不再执行
      return;
    }
    if (!toastVM) {
      let ToastTpl = Vue.extend({
        data: function() {
          return {
            show: showToast,
            tip: tips,
            type: `zuitoast-${curType}`
          };
        },
        template: `<div v-show="show" :class="type" class="zuitoast ${wordWrap}" ${style}>{{tip}}</div>`
      });

      toastVM = new ToastTpl();
      let tpl = toastVM.$mount().$el;

      document.body.appendChild(tpl);
    }
    toastVM.type = 'zuitoast-' + curType;
    toastVM.tip = tips;
    toastVM.show = showToast = true;

    setTimeout(function() {
      toastVM.show = showToast = false;
    }, opt.duration);
  };

  ['bottom', 'center', 'top'].forEach(function(type) {
    Vue.prototype.$ztoast[type] = function(tips) {
      return Vue.prototype.$ztoast(tips, type);
    };
  });

  Vue.prototype.$zloading = function(tips, type) {
    if (type == 'close') {
      loadNode.show = showLoad = false;
    } else {
      if (showLoad) {
        // 如果loading还在，则不再执行
        return;
      }
      let LoadTpl = Vue.extend({
        data: function() {
          return {
            show: showLoad
          };
        },
        template: `
        <div v-show="show" class="zuiload-mark">
          <div class="zuiload-box">
            <div class="zuiloading">
              ${loadingLogo}
            </div>
            <div class="zuiload-content">${tips}</div>
          </div>
        </div>
        `
      });

      loadNode = new LoadTpl();
      let tpl = loadNode.$mount().$el;

      document.body.appendChild(tpl);
      loadNode.show = showLoad = true;
    }
  };

  ['open', 'close'].forEach(function(type) {
    Vue.prototype.$zloading[type] = function(tips) {
      return Vue.prototype.$zloading(tips, type);
    };
  });
};

// 向外暴露接口
export default Toast;
